<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #citys > li{
            font-weight: bolder;
            cursor: pointer;
        }
    </style>
    <script src="./js/jquery.js"></script>
</head>
<body>
    <ul id="citys"></ul>
</body>
<script>
    $.ajax({
        url:'http://localhost:3000'
    }).then(res=>{
        var data = JSON.parse(res);
        console.log(data);
        var provinces = data.locality.provinces[0].province;
        var citys = data.locality.citys[0].city;
        for (var i in provinces){
            $('#citys').append('<li>' + provinces[i].$.text + '</li>');
            var ul = document.createElement('ul');
            for(var j in citys){
                if(provinces[i].$.id === citys[j].$.pid){
                    var li = document.createElement('li');
                    li.innerHTML = citys[j].$.name;
                    ul.appendChild(li);
                }
            }
            $(ul).hide();
            $('#citys').append(ul);
        }

        $('#citys>li').click(function(){
            $(this).next('ul').toggle();
        })

    });
</script>
</html>